<template>
	<view class="seat-selection">
		<view style="background-color:  #4BA677; height: 160rpx;"></view>

		<view class="top d-inline-block">
			<view class="goods d-flex" style="margin-top: -90rpx;">
				<u-image width="269rpx" height="156rpx" radius="10rpx"></u-image>
				<view class="d-flex justify-space-between flex-column flex-grow-1" style="margin-left: 20rpx;">
					<view>
						<view class="name">{{ data.name }}</view>
						<view class="status">{{ data.status }}</view>
					</view>
					<view class="flex-between">
						<price :value="data.price" color="#4BA677"></price>
						<view class="rest">
							剩余：{{ data.rest }}名
						</view>
					</view>
				</view>
			</view>

			<view class="current-area flex-between" @click="chooseArea">
				<view>
					<u-text text="当前区域" color="#888"></u-text>
					<view style="margin-top: 14rpx;">
						<u-text text="场地东侧-A区" color="#333" bold></u-text>
					</view>
				</view>
				<u-icon name="arrow-right" color="#BEBEBE"></u-icon>
			</view>

			<view class="price-list d-flex flex-wrap">
				<view v-for="item in priceList" :key="item.value" class="item flex-align">
					<view class="color" :style="{ backgroundColor: item.color }"></view>
					<view>
						¥ {{ item.value }}
					</view>
				</view>
			</view>
		</view>

		<view class="seat-wrapper">
			<view class="flex-between">
				<view class="flex-align">
					<u-icon name="info-circle-fill" color=" #4BA677"></u-icon>
					<u-text text="场地布局图" color=" #4BA677" size="24rpx" margin="0 0 0 7rpx"></u-text>
				</view>
				<view class="flex-align">
					<u-image :src="`${assetsPath}64f9cbea836e9d11679fa01d247771f5ba8d342b.png`" width="33rpx"
						height="33rpx"></u-image>
					<u-text text="已售/不可售" color="#999" size="24rpx" margin="0 0 0 7rpx"></u-text>
				</view>
			</view>

			<view class="d-flex" style="margin-top: 32rpx;">
				<view class="side">
					<view v-for="(item, index) in seat.length" :key="index">
						{{ 'A' + (index + 1) }}
					</view>
				</view>

				<view class="seat-list oa-x flex-grow-1">
					<view class="head flex-align">
						<view v-for="(item, index) in seat[0].length" :key="index" class="head-col flex-center">
							{{ index + 1 }}
						</view>
					</view>

					<view v-for="(row, x) in seat" :key="x" class="row flex-align">
						<view v-for="(col, y) in row" :key="y" class="col flex-center">
							<view @click="chooseSeat(col, x, y)" class="pr">
								<u-image :src="col.icon" width="45rpx" height="41rpx"></u-image>
								<view class="checked pa" v-if="isChecked(x, y) !== -1">
									<u-icon name="checkmark" color="#fff" size="24rpx"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="selected-list d-flex">
				<view v-for="item in selected" class="item pr flex-shrink-0">
					<u-text text="东侧A区" color="#999" size="22rpx"></u-text>
					<u-text :text="`A${item.x + 1}排${item.y + 1}号`" color="#000" size="22rpx"></u-text>
					<view class="remove pa" @click="removeSeat(item.x, item.y)">
						<u-icon name="close-circle-fill" color=" #4BA677" size="40rpx"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom-add-btn flex-between">
			<price :value="totalPrice" color="#4BA677"></price>
			<u-button text="确认选择" shape="circle" @click="confirm" customStyle="width: 318rpx; margin: 0;"
				color="linear-gradient( 270deg, #47B37B 0%, #69D19B 100%, #4BA677 0%)"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				assetsPath: this.$https.assetsPath,
				data: {
					name: 'CBA苏州市体育中心',
					status: '进行中',
					price: 888,
					rest: 8
				},
				disabledSeat: {
					disabled: true,
					icon: this.$https.assetsPath + '64f9cbea836e9d11679fa01d247771f5ba8d342b.png'
				},
				priceList: [{
						value: 50,
						color: '#55D74E',
						icon: this.$https.assetsPath + 'fa4970cb83f628ad18d9989d1b21c4ed02f220da.png'
					},
					{
						value: 80,
						color: '#FF5757',
						icon: this.$https.assetsPath + '38409009244a3063807e7ec86dc5b7d402f2cc2d.png'
					},
					{
						value: 90,
						color: '#F852E2',
						icon: this.$https.assetsPath + '37ca69afdcb3b21ca91550bd097aab58e47a5d2b.png'
					},
					{
						value: 98,
						color: '#F8D032',
						icon: this.$https.assetsPath + '008069554495a7c9215ae1c60046f7a5dc2598c1.png'
					},
				],
				activeArea: 1,
				selected: []
			}
		},
		computed: {
			totalPrice() {
				return this.selected.reduce((prev, item) => prev + (item.value || 0), 0)
			},
			seat() {
				return [
					[
						this.priceList[0],
						this.disabledSeat,
						this.priceList[0],
						this.priceList[0],
						this.disabledSeat,
						this.priceList[0],
						this.disabledSeat,
						this.priceList[0],
						this.priceList[0],
						this.priceList[0],
						this.disabledSeat,
						this.priceList[0],
						this.priceList[0],
					],
					[
						this.priceList[1],
						this.priceList[1],
						this.disabledSeat,
						this.priceList[1],
						this.disabledSeat,
						this.priceList[1],
						this.priceList[1],
						this.disabledSeat,
						this.priceList[1],
						this.priceList[1],
						this.priceList[1],
						this.disabledSeat,
						this.priceList[1],
					],
					[
						this.priceList[2],
						this.priceList[2],
						this.priceList[2],
						this.priceList[2],
						this.disabledSeat,
						this.priceList[2],
						this.disabledSeat,
						this.priceList[2],
						this.disabledSeat,
					]
				]
			}
		},
		methods: {
			chooseSeat(item, x, y) {
				if (item.disabled) return;
				const index = this.isChecked(x, y);
				if (index !== -1) {
					this.selected.splice(index, 1);
					return;
				}
				this.selected.push({
					x,
					y,
					...item
				});
			},
			isChecked(x, y) {
				return this.selected.findIndex(item => item.x === x && item.y == y);
			},
			removeSeat(x, y) {
				this.selected.splice(this.isChecked(x, y), 1);
			},
			confirm() {
				uni.navigateTo({
					url: '/page_points/activity-seat/seat-selection/collect-info/collect-info'
				});
			},
			chooseArea() {
				uni.navigateTo({
					url: '/page_points/activity-seat/seat-selection/choose-area/choose-area'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bottom-add-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		background-color: #fff;
		z-index: 1;
	}

	.seat-selection {
		padding-bottom: calc(130rpx + env(safe-area-inset-bottom));

		.top {
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 0px 0px;
			padding: 0 30rpx 20rpx;
			margin-top: -30rpx;
			width: 100%;
			box-shadow: 0px 24rpx 57rpx 0px rgba(8, 73, 162, 0.05);

			.name,
			.status {
				color: #fff;
			}
		}

		.goods {
			.name {
				font-size: 28rpx;
			}

			.status {
				font-size: 24rpx;
			}

			.rest {
				color: #BEBEBE;
				font-size: 22rpx;
			}
		}

		.current-area {
			background: rgba(75, 166, 119, 0.1);
			border: 1px solid #4BA677;
			border-radius: 5rpx;
			margin: 40rpx 0 20rpx;
			padding: 30rpx;
		}

		.price-list {
			font-size: 24rpx;

			.item {
				background: rgba(216, 221, 255, 0.2);
				border: 1px solid #EFEFEF;
				border-radius: 32rpx;
				padding: 15rpx;

				&+.item {
					margin-left: 15rpx;
				}
			}

			.color {
				width: 37rpx;
				height: 37rpx;
				border-radius: 50%;
				margin-right: 15rpx;
			}
		}

		.seat-wrapper {
			padding: 36rpx 25rpx;

			.side {
				margin-top: 64rpx;
				font-size: 20rpx;
				margin-right: 35rpx;

				view {
					line-height: 41rpx;
					padding-bottom: 24rpx;
				}
			}

			.head {

				height: 40rpx;
				color: #999999;
				font-size: 20rpx;
				margin-bottom: 24rpx;

				.head-col {
					flex: 1 0 11.11%;
					height: 100%;
					background: #F3F3F3;

					&:first-of-type {
						border-radius: 18rpx 0 0 18rpx;
					}

					&:last-of-type {
						border-radius: 0 18rpx 18rpx 0;
					}
				}
			}

			.seat-list {
				.col {
					padding-bottom: 24rpx;
					flex: 1 0 11.11%;
				}

				.checked {
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.selected-list {
				margin-top: 80rpx;
				padding-top: 20rpx;

				.item {
					background: #F3F3F3;
					border: 2rpx solid #4BA677;
					border-radius: 10rpx;
					padding: 14rpx 23rpx;

					&+.item {
						margin-left: 35rpx;
					}
				}

				.remove {
					right: 0;
					top: 0;
					transform: translate(50%, -50%);
				}
			}
		}
	}
</style>